<template>
    <div class="input">
        <el-input @change="change" type="number" :min="min" :max="max" :step="0.1" :class="{ 'no-hover': hover }" v-number-drag="{ min: 0.1, max: 15, step: 0.1 }" v-model="num" placeholder="">
            <template #prefix>
                <img v-if="icType == 0" src="@/assets/images/config-scale.png" class="ic" />
                <img v-else src="@/assets/images/config-rotate.png" class="ic" />
            </template>
        </el-input>
    </div>

</template>

<script setup>
import { ref } from 'vue';
import customCursorImg from '@/assets/images/cursor.png';
const props = defineProps({
    icType: {
        type: Number,
        default: 0
    },
    value: {
        type:[ Number,String],
        default: 1
    },
    max: {
        type: Number,
        default: 30
    },
    min: {
        type: Number,
        default: 0.1
    },
})
const model = defineModel()
const emits = defineEmits(['change'])
const hover = ref(false)
const num = ref(1);
watch(() => props.value, val => {
    num.value = val;  
}, { deep: true, immediate: true });
const vNumberDrag = {
    mounted(el, binding) {
        const input = el.querySelector('.el-input__prefix');
        const input1 = el.querySelector('.el-input__inner');
        const config = binding.value || {};
        let startX = 0, initialValue = 0;

        input.addEventListener('mousedown', (e) => {
            startX = e.clientX;
            initialValue = parseFloat(input.value) || 0;
            document.addEventListener('mousemove', handleMove);
            document.addEventListener('mouseup', handleUp);
            // element.style.cursor = 'pointer';
            document.body.style.cursor = 'url(' + customCursorImg + ') 14 14, auto';
            hover.value = true;
        });

        const handleMove = (e) => {
            const deltaX = e.clientX - startX;
            let newVal = initialValue + deltaX * (config.step || 1);

            newVal = Math.max(config.min || -Infinity,
                Math.min(config.max || Infinity, newVal));
            let tmp = config.precision ?
                newVal.toFixed(config.precision) :
                Math.round(newVal);
            if (tmp < 0.1) {
                num.value = 0.1;
            } else {
                num.value = tmp.toFixed(1);;

            }
           emits('change', num.value)

        };

        const handleUp = () => {
            document.removeEventListener('mousemove', handleMove);
            document.removeEventListener('mouseup', handleUp);
            document.body.style.cursor = 'default';
            hover.value = false;
        };
    }
};

const change =(e)=> {
    emits('change', e)
}


</script>
<style scoped lang="scss">
.input {
    width: 120px;
    border: none !important;
    :deep(.el-input__inner) {
        background-color: #23446f !important;
        color: #fff;
        font-size: 14px;
        // border: none !important;
        padding-left: 6px;
    }

    :deep(.el-input__wrapper) {
        background: #23446f !important;
        // border: none !important;
        box-shadow: none !important;
    }

    :deep(.el-input) {
        // border: none !important;
    }
    
}
.no-hover {
    pointer-events: none; /* 禁用所有鼠标事件 */
    opacity: 0.7; /* 视觉降级 */
}

.ic {
    width: 20px;
    height: 20px;
    user-drag: none; /* 标准属性 */
    -webkit-user-drag: none; /* Safari兼容 */

    &:hover {
        cursor: url("@/assets/images/cursor.png") 10 10, pointer;
    }
}
</style>